<template>
  <div class="trace-container">

    <div class="header-container">
      <div class="title-wrapper">
        <i class="el-icon-s-data title-icon"></i>
        <h1 class="page-title">
          <span class="device-name">GCSSP20250211M</span>
          <span class="title-text">使用轨迹</span>
        </h1>
        <div class="decorative-line"></div>
      </div>
    </div>

    <el-date-picker
      v-model="timeRange"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="handleTimeRangeChange"
      style="margin: 20px 0"
    />



    <div class="olive-branch">
      <!-- SVG静态曲线 -->
      <svg
        class="static-curve"
        :viewBox="`0 0 100 100`"
        preserveAspectRatio="none"
      >
        <path
          :d="curvePath"
          stroke="#4CAF50"
          stroke-width="0.5"
        fill="none"
        />
      </svg>

      <!-- 轨迹节点 -->
      <div
        v-for="(item, index) in filteredData"
        :key="index"
        class="trace-node"
        :style="getNodeStyle(index)"
        @mouseenter="showTooltip(index)"
        @mouseleave="hideTooltip"
      >
        <div class="node-core" :style="getStatusStyle(index)"></div>

        <!-- 工具提示 -->
        <transition name="fade">
          <div
            class="tooltip"
            :style="tooltipPosition"
            v-show="activeIndex === index"
          >
            <div class="tooltip-content">
              <h4>{{ item.assetId }}</h4>
              <p>操作类型：{{ item.operationType }}</p>
              <p>操作时间：{{ item.operationTime }}</p>
              <p>操作人：{{ item.operator }}</p>
              <p>状态：{{ item.status }}</p>
            </div>
            <div class="tooltip-arrow"></div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timeRange: [new Date('2025-03-01'), new Date('2025-03-31')],
      activeIndex: -1,
      originData: this.generateMockData(),
      filteredData: [],
      tooltipPosition: {},
      curvePath: '',
      svgWidth: 1000,
      svgHeight: 200,
    }
  },
  mounted() {
    this.filterData()
    this.calculateCurve()
  },
  methods: {
    generateMockData() {
      return Array.from({length: 15}, (_, i) => {
        const x = (i / 14) * 100
        const y = 50 + Math.sin((x / 100) * Math.PI * 2) * 30
        return {
          assetId: `GCSSP20250211${i.toString().padStart(3, '0')}M`,
          operationType: ['借用', '归还', '维护'][i % 3],
          operationTime: `2025-03-${25 - i} 10:00`,
          operator: ['张三', '李四', '王五'][i % 3],
          status: ['已通过', '待审核', '已拒绝'][i % 3],
          x: x,
          y: y
        }
      })
    },
    calculateCurve() {
      // 直接使用百分比坐标（与节点定位一致）
      const points = this.filteredData.map(item =>
        `${item.x} ${item.y}`
      )
      this.curvePath = `M ${points.join(' L ')}`
    },
    getNodeStyle(index) {
      const {x, y} = this.filteredData[index]
      return {
        left: `${x}%`,
        top: `${y}%`,
        transform: 'translate(-50%, -50%)'
      }
    },
    getStatusStyle(index) {
      const colors = {
        借用: '#4CAF50',
        归还: '#8BC34A',
        维护: '#2E7D32'
      }
      return {backgroundColor: colors[this.filteredData[index].operationType]}
    },
    showTooltip(index) {
      this.activeIndex = index
      this.updateTooltipPosition(index)
    },
    updateTooltipPosition(index) {
      const {x, y} = this.filteredData[index]
      this.tooltipPosition = {
        left: `${x}%`,
        top: `${y}%`,
        transform: 'translate(-50%, calc(-100% - 10px))'
      }
    },
    hideTooltip() {
      this.activeIndex = -1
    },
    filterData() {
      const [start, end] = this.timeRange
      this.filteredData = this.originData.filter(item => {
        const date = new Date(item.operationTime)
        return date >= start && date <= end
      })
      this.calculateCurve()
    },
    handleTimeRangeChange() {
      this.filterData()
    }
  }
}
</script>

<style scoped>
.header-container {
  padding: 0 20px 15px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 20px;
}
.title-wrapper {
  display: flex;
  align-items: center;
  position: relative;
}

.title-icon {
  font-size: 28px;
  color: #4CAF50;
  margin-right: 12px;
}

.page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #303133;
  display: flex;
  align-items: baseline;
}

.device-name {
  color: #4CAF50;
  font-size: 18px;
  margin-right: 10px;
  font-family: monospace;
}

.title-text {
  position: relative;
  padding-left: 12px;
}

.title-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 18px;
  width: 3px;
  background-color: #4CAF50;
}

.decorative-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #4CAF50 20%, rgba(76,175,80,0.2) 80%);
  margin-left: 20px;
}

@media (max-width: 768px) {
  .header-container {
    padding: 0 15px 12px;
  }

  .title-icon {
    font-size: 24px;
  }

  .page-title {
    font-size: 20px;
  }

  .device-name {
    font-size: 16px;
  }
}

.trace-container {
  width: 100%;
  height: 100vh;
  padding: 20px;
  background-color: #ffffff;
}

.olive-branch {
  height: calc(100vh - 80px);
  width: 100%;
}

.static-curve {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.trace-node {
  position: absolute;
  z-index: 2;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.3);
}

.trace-node:hover {
  transform: scale(1.2) translate(-50%, -50%);
  box-shadow: 0 0 12px rgba(76, 175, 80, 0.5);
}

.node-core {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.tooltip {
  position: absolute;
  background: #fff;
  padding: 12px 15px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  z-index: 3;
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: #fff;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

@media (max-width: 768px) {
  .trace-container {
    padding: 10px;
  }

  .olive-branch {
    height: calc(100vh - 60px);
  }
}
</style>
